<template>
  <div>
    <div :id="DOM" class="container"></div>
  </div>
</template>
<script>
import { clockInDistance } from "@/pages/clockIn/constant.js";
import { AMAPKEY, loadMap } from "@/utils/amap.js";
import { getuserUid, getUserLogin } from "@/utils/auth.js";
export default {
  props: ["DOM", "position"],
  data() {
    return {
      map: "",
      key: ""
    };
  },
  watch: {
    position: function(x, y) {
      this.initMap();
    }
  },
  methods: {
    initMap: function() {
      //加载地图
      this.map = new AMap.Map(this.DOM, {
        zoom: 16,
        center: this.position
      });
      //标记
      var marker = new AMap.Marker({
        position: this.position //位置
      });
      this.map.add(marker);
    }
  },
  created() {
    this.key = AMAPKEY; //地图key值
    console.log("this.DOM:" + this.DOM);
  },
  mounted() {
    loadMap(this.key, "", "1.4.13")
      .then(AMap => {
        // 此处地图就加载成功了，然后就可以使用`new AMap.Map`来实例化地图了
        console.log("地图加载成功！");
        this.initMap();
      })
      .catch(() => {
        console.log("地图加载失败！");
      });
  }
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 2rem;
  background-color: #eee;
}
</style>
